<template>
	<div class="Abnormal">
		<header>
			<i class="iconfont icon-xiangzuo1" @click="goPrev"></i><span>库存查询</span
			><i class="iconfont icon-shanguangdeng" @click="flashOpenOrClose"></i
			><i class="iconfont closeScan" @click="closeScan">关闭</i>
		</header> 
		<div class="content-box">
			<v-scan
			 @scanData="scanData"
			ref="ch"
			:textre="textre"
			:switchScan="switchScan"
			:loadingData="loadingData"
			></v-scan>
		</div>

		<!-- <div class="query-box">
			<div class="address" style="margin-left: 5px;margin-right: 5px;padding-bottom: 5px;"> 
				<el-input v-model="loc" placeholder="请输入库位" clearable/>
				<el-button type="primary" style="margin-left: 15px;" @click="getOrderListBtn" >查询</el-button>
			</div>
		</div> -->
		<!-- <div class="form-content" style="overflow:scroll;"> -->
		<div class="form-content" :style="{ height: wrapperHeight + 'px' }" style="overflow:scroll;margin-top: 10px;">
			<mt-loadmore topDropText="下拉刷新" topLoadingText="" topPullText='' bottomPullText="" bottomDropText="上拉加载" bottomLoadingText="" :top-method="loadTop" :bottom-method="loadBottom" ref="loadmore" :autoFill="autoFill">
				<div v-for="(item, index) in orderList" :key="index">
					<div class="order-box" @click="openClockInfo(item)">
						<div class="order-item">
							<div style="width: 60%"><span>库位:&nbsp; </span> {{ item.loc }}</div>
							<div><span>订单数:&nbsp; </span> {{ item.orderQty }}</div>
						</div>
						<div class="order-item">
							<div style="width: 60%"><span>是否装满:&nbsp; </span> <span :style="{ color: item.fillFlag ? 'red' : '#000' }">{{ item.fillFlag ? '是' : '否' }}</span></div>
							<div><span>最大订单数:&nbsp; </span>{{ item.maxOrderQty }}</div>
						</div>
						<div class="order-item">
							<div>
								<span>货物到齐标志:&nbsp; </span>
								<span v-if="item.stockCompletionFlag == 'Z-KX'" style="color:red">空闲</span>
								<span v-if="item.stockCompletionFlag == 'N-WDQ'" style="color:red">未到齐</span>
								<span v-if="item.stockCompletionFlag == 'H-BFDQ'" style="color:red">部分到齐</span>
								<span v-if="item.stockCompletionFlag == 'A-YDQ'" style="color:red">已到齐</span>
								<span v-if="item.stockCompletionFlag == '货到齐入库中'" style="color:red">货到齐入库中</span>
							</div>
						</div>
						<!-- <div class="btn">
							<div class="edit" @click="openClockInfo(item)">详情</div>
						</div> -->
					</div>
				</div>
				<div v-if="allLoaded && orderList.length " class="nodata_label">没有更多数据</div>
			</mt-loadmore>
		</div> 
		<!-- 页面数据为空时 -->
		<div v-if="is_NoData" class="NoData">
			<div>
				<i class="iconfont icon-meiyouwuliuxinxi"></i>
				<div>{{is_NoData_text}}</div>
			</div>
		</div>
	</div>
</template>
<script>
import Scan from '@/components/ContinuousScan';
  import pictureSample from '@/components/pictureSample'
  import Header from '@/components/header'
	import * as fetchObj from '@/api/index/reportAbnormal'
	import $ from "jquery" 
	import Vue from 'vue';
	import { Toast, Dialog } from 'vant';
	Vue.use(Toast).use(Dialog);
	export default {
		name: 'ReportAbnormal',
		components: {
		'v-scan': Scan,
      'v-header': Header,
      'pictureSample': pictureSample
		},
		data() {
			return {
				loadingData: false,
				switchScan: true,
				textre: '请输入库位或者单号',
				loc: '',
      			consignesList: [],
				orderList: [],
				type: '',
				currentItem: {},
				centerDialogVisible: false,
				distanceList: [],
				isAllowClockIn: false,
				orgnizationId: null,
				allLoaded: true, // 上拉刷新还能上拉刷新
				autoFill: false,
				loadPage: 1, // 当前第几页
				wrapperHeight: 0,
				is_NoData: false, // 没有数据模块样式  是否显示
				is_NoData_text: '暂无数据', // 没有数据模块样式  显示的文字
			}
		},
		watch: { 
		},
		mounted() {
			this.wrapperHeight = document.documentElement.clientHeight - 200
			// this.onPlusReady('e') // 获取APP经纬度
		},
		created() {
			if (this.$store.state.lnventoryCurrentLoc) {
				this.loc = this.$store.state.lnventoryCurrentLoc
			}
    		// this.getQueryConsignesList()
			this.getOrderList()
		},
		methods: {
			// 扫描后
			scanData(data) {
				let that = this
				this.loc = data
				const params = {
					currentPage: 1,
					loc: data
				}
				this.httpRequest1('post', '/system/wms/queryLocOrder', params).then((res) => {
					that.orderList = res.data.list || [];
					if (that.orderList.length) {
						that.is_NoData = false; // 没有数据模块 是否显示
					} else {
						that.is_NoData_text = '暂无数据'
						that.is_NoData = true;
					}
					// 判断是否能上拉加载
					if (res.data.list && res.data.list.length < 10) {
						that.allLoaded = true;
					} else {
						that.allLoaded = false;
					}
				})
			},
			// 下拉刷新
			loadTop() {
				this.loadPage = 1;
				this.allLoaded = false;
				this.getOrderList('TopLoad');
			},
			// 上拉加载
			loadBottom() {
				let that = this;
				if (that.allLoaded) {
					that.$refs.loadmore.onBottomLoaded();
					return;
				} else {
					that.loadPage += 1;
				}
				this.getOrderList('BottomLoad');
			},
			getOrderListBtn () {
				this.loadPage = 1
				this.getOrderList()
			},
			getOrderList (load) {
				let that = this
				const params = {
					currentPage: this.loadPage,
					loc: this.loc
				}
				this.httpRequest1('post', '/system/wms/queryLocOrder', params).then((res) => {
					if (load) {
						if (load == 'TopLoad') {
							that.$refs.loadmore.onTopLoaded();
						} else if (load == 'BottomLoad') {
							that.$refs.loadmore.onBottomLoaded();
						}
					}
					//上拉加载后 数据拼接
					if (that.loadPage > 1) {
						that.orderList = that.orderList.concat(res.data.list || [])
					} else {
						that.orderList = res.data.list || [];
						if (that.orderList.length) {
							that.is_NoData = false; // 没有数据模块 是否显示
						} else {
							that.is_NoData_text = '暂无数据'
							that.is_NoData = true;
						}
					}
					// 判断是否能上拉加载
					if (res.data.list && res.data.list.length < 10) {
						that.allLoaded = true;
					} else {
						that.allLoaded = false;
					}
				})
			},
			openClockInfo (item) {
				if (!item.orderQty || !item.orderList) {
					let text = item.loc + '库位暂无订单信息'
					this.$alert(text, '提示', {
						confirmButtonText: '确定'
					})
				} else {
					this.closeScan()
					this.$store.state.lnventoryCurrentLoc = this.loc
					this.$router.push({
						name: "InventoryOrderList",
						params: {
							inventoryInfo: item,
							loc: this.loc
						} 
					})
				}
			},
			goPrev() {
				this.closeScan()
				this.$store.state.lnventoryCurrentLoc = ''
				this.$router.push({
					name: "Index",
				})
			},
			switchScanFun(data) {
				if (data) {
				this.switchScan = true // 打开摄像头
				} else {
				this.switchScan = false // 关闭摄像头
				}
			},
			uploadOnChange(file) {
				this.switchScanFun(true); // 打开摄像头
			}
    	},
  		beforeDestroy () {
			this.closeScan()
  		}
  }
</script>
<style scoped lang="less">
	@import "../../components/publicLess.less";
	.Abnormal {
		font-size: 28/50rem;
	}
	.query-box {
		position: fixed;
		top: 90/50rem;
		width: 100%;
		background: #fff;
	}
	.order-box {
		margin: 5px;
		border: 1px solid #e1e1e1;
		padding: 5px 10px;
		line-height: 23px;
		.orderNo {
			border-bottom: 1px solid #e1e1e1;
		}
		.order-item {
			display: flex;
		}
		span {
			color: #6e6b6bbd;
		}
	}
	.btn {
		display: flex;
		justify-content: right;
		margin-top: 6px;
		.edit {
			width: 20%;
			background-color: #038EEA;
			color: #fff;
			text-align: center;
			border-radius: 5px;
		}
	}
	.footer-btn {
		position: fixed;
		bottom: 20px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 5px;
		width: 50%;
		background-color: #038EEA;
		color: #fff;
		margin-left: 25%;
	}
	
.address {
  margin-top: 10px;
  display: flex;
  img {
    width: 80/50rem;
		padding: 12/50rem;
		box-sizing: border-box;
		height: 80/50rem;
		line-height: 80/50rem;
  }
  .ok-btn {
    width: 76/50rem;
    height: 76/50rem;
    font-size: 28/50rem;
    line-height: 80/50rem;
    margin: 0 10/50rem;
    text-align: center;
    background-color: #038EEA;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
  }
}
.currentAddress {
  font-size: 28/50rem;
  padding: 20/50rem;
  color: #9b9b9b;
}
/deep/ .el-select-dropdown.el-popper {
  left: 0 !important;
  z-index: 9999;
}
.el-select-dropdown .el-select-dropdown__item {
  white-space: normal;
  line-height: 20px !important;
  height: inherit;
  border-bottom: 1px solid #e1e1e1;
  padding-top: 5px;
  padding-bottom: 5px;
}
.clockIn {
	height: 80px;
	width: 80px;
	background-color: #038EEA;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: 50%;
	line-height: 80px;
	text-align: center;
	color: #fff;
	font-size: 20px;
}
</style>